<template>
    <div class="data">
        <div class="a">
            <p class="Shisi">今日实时</p>
            <div class="a1">
                <p class="zuida">
                    <span>预定销售额</span>
                    <span class="yuan">?</span>
                </p>
                <p style="color:#0466C8">1087.00</p>
                <p>竞争圈 3/12</p>
            </div>
            <div class="a2">
                <p>
                    <span>在店间夜</span>
                    <span class="yuan">?</span>
                </p>
                <p style="color:#0466C8">7</p>
                <p>竞争圈 3/12</p>
            </div>
            <div class="a3">
                <p>
                    <span>预定订单数</span>
                    <span class="yuan">?</span>
                </p>
                <p style="color:#0466C8">15</p>
                <p>竞争圈 3/12</p>
            </div>
            <div class="a4">
                <p>
                    <span>点评分</span>
                    <span class="yuan">?</span>
                </p>
                <p style="color:#0466C8">4.8</p>
                <p>竞争圈 3/12</p>
            </div>

        </div>
        <div class="a">
            <p class="Shisi">昨日数据</p>
            <div class="a1">
                <p class="zuida">
                    <span>离店销售额</span>
                    <span class="yuan">?</span>
                </p>
                <p style="color:#0466C8">1087.00</p>
                <p>竞争圈 3/12</p>
            </div>
            <div class="a2">
                <p>
                    <span>在店间夜</span>
                    <span class="yuan">?</span>
                </p>
                <p style="color:#0466C8">7</p>
                <p>竞争圈 3/12</p>
            </div>
            <div class="a3">
                <p>
                    <span>平均卖价</span>
                    <span class="yuan">?</span>
                </p>
                <p style="color:#0466C8">499</p>
                <p>竞争圈 3/12</p>
            </div>
            <div class="a4">
                <p>
                    <span>点评分</span>
                    <span class="yuan">?</span>
                </p>
                <p style="color:#0466C8">4.8</p>
                <p>竞争圈 3/12</p>
            </div>
        </div>
        <div class="a">
            <p class="Shisi">违约看板</p>
            <div class="FaPiao">
                <div>欠发票</div>
                <div class="ShiJian">通知时间</div>
                <div>| 2021-10-01</div>
            </div>
            <div class="tongzhi">贵酒店有预付款发票未提供。若未及时补开发票，将于通知时间起的7个工作日后违约生效。</div>
            <div class="chakan">查看</div>
        </div>
        <div class="a">
            <p class="Shisi">违约看板</p>
            <div class="pingjia">
                <div>
                    <div class="pingfen">5分</div>
                    <div class="shijian">商务单人间 | 2021-10</div>
                </div>
                <p>环境不错，第二次入住了。闹中取静，房间很干净，布置的也很温馨，相比同档次酒店，性价比很高。</p>
                <button>回复</button>
            </div>
            <div class="huifu">
                <el-input placeholder="输入内容" />
                <div class="chakan">发表回复</div>
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
.data {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: space-between;
    color: #666666;
    margin-bottom: 30px;
}

.Shisi {
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    margin: 16px;
}

.a {
    width: 336px;
    height: 316px;
    background-color: #fff;
    margin-left: 10px;
    border-radius: 10px;
    display: flex;
    position: relative;

    .a1 {
        width: 100px;
        position: relative;
        position: absolute;
        top: 100px;
        left: 10px;

        .zuida {
            font-size: 14px;
        }

        p {
            font-size: 12px;
            margin-bottom: 8px;

            .yuan {
                display: block;
                width: 13px;
                height: 13px;
                line-height: 13px;
                text-align: center;
                border: 1px solid #666666;
                border-radius: 10px;
                position: absolute;
                top: 0px;
                right: 10px;
            }
        }
    }

    .a2 {
        width: 100px;
        position: relative;
        position: absolute;
        top: 100px;
        left: 200px;

        .zuida {
            font-size: 14px;
        }

        p {
            font-size: 12px;
            margin-bottom: 8px;

            .yuan {
                display: block;
                width: 13px;
                height: 13px;
                line-height: 13px;
                text-align: center;
                border: 1px solid #666666;
                border-radius: 10px;
                position: absolute;
                top: 0px;
                right: 10px;

            }
        }
    }

    .a3 {
        width: 100px;
        position: relative;
        position: absolute;
        top: 200px;
        left: 10px;

        .zuida {
            font-size: 14px;
        }

        p {
            font-size: 12px;
            margin-bottom: 8px;

            .yuan {
                display: block;
                width: 13px;
                height: 13px;
                line-height: 13px;
                text-align: center;
                border: 1px solid #666666;
                border-radius: 10px;
                position: absolute;
                top: 0px;
                right: 10px;

            }
        }
    }

    .a4 {
        width: 100px;
        position: relative;
        position: absolute;
        top: 200px;
        left: 200px;

        .zuida {
            font-size: 14px;
        }

        p {
            font-size: 12px;
            margin-bottom: 8px;

            .yuan {
                display: block;
                width: 13px;
                height: 13px;
                line-height: 13px;
                text-align: center;
                border: 1px solid #666666;
                border-radius: 10px;
                position: absolute;
                top: 0px;
                right: 10px;

            }
        }
    }

    .FaPiao {
        display: flex;
        position: absolute;
        top: 130px;
        left: 40px;

        .ShiJian {
            margin-left: 60px;
            margin-right: 10px;
        }
    }

    .tongzhi {
        position: absolute;
        top: 170px;
        left: 40px;
        width: 255px;
        height: 41px;
        line-height: 25px;
    }

    .chakan {
        width: 43px;
        height: 28px;
        background-color: #0466C8;
        color: #fff;
        text-align: center;
        line-height: 28px;
        position: absolute;
        bottom: 60px;
        right: 40px;
    }

    .pingjia {
        width: 280px;
        height: 120px;
        border: 1px solid #EAEBEC;
        border-radius: 5px;
        background-color: antiquewhite;
        position: absolute;
        top: 50px;
        left: 10px;

        div {
            height: 30px;
            margin-top: 5px;
            display: flex;
            justify-content: center;

            .pingfen {
                width: 30px;
                height: 20px;
                background-color: #4DD43B;
                text-align: center;
                line-height: 20px;
                border-radius: 10px;
            }

            .shijian {
                width: 120px;
                height: 20px;
                line-height: 20px;
                margin-left: 60px;
            }
        }

        p {
            width: 260px;
            height: 40px;
            margin: 7px 7px 3px;
            line-height: 20px;
        }

        button {
            width: 35px;
            height: 25px;
            background-color: #0466C8;
            margin-left: 230px;
        }
    }

    :deep(.huifu) {
        width: 280px;
        position: absolute;
        bottom: 92px;
        left: 10px;

        .chakan {
            width: 76px;
            height: 28px;
            background-color: #0466C8;
            color: #fff;
            text-align: center;
            line-height: 28px;
            position: absolute;
            bottom: -60px;
            right: 10px;
        }
    }
}
</style>